<template>
    <div class="footer">
      <van-tabbar route>
        <van-tabbar-item
          v-for="item in barList"
          :key="item.id"
          :to="item.to"
          :icon="item.icon">
          {{ item.title }}
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  
  <script setup lang="ts">
  // 定义一个数组, 循环生成底部导航栏
  // 导入接口限制
  import type { MyBarItem } from '@/config/interface'
  const barList: MyBarItem[] = [
    { id: 1, to: '/home', icon: 'home-o', title: '首页' },
    { id: 2, to: '/cate', icon: 'apps-o', title: '分类' },
    { id: 3, to: '/cart', icon: 'cart-o', title: '购物车' },
    { id: 4, to: '/self', icon: 'user-o', title: '我的' }
  ]
  </script>
  
  <style scoped lang="scss">
.footer{
  height: 100px;
}
</style>
  